<template>
  <el-header>
    <div class="header-content">
      <div class="logo header-item" @click="goToHome">
        <img style="height: 50px;" src="../assets/logo.png" alt="Logo"/>
      </div>
      <div class="header-item">
        <span style="margin-right: 50px;color:black">Welcome, {{ userInfo.nickName }}</span>
        <el-button @click="logout">Logout</el-button>
      </div>
    </div>
  </el-header>
</template>

<script>
import request from "@/request/request";

export default {
  data() {
    return {
      userInfo: {
        id: 1,
        nickName: "周进川",
        password: "123456",
        userName: "zhoujinchuan"
      }
    }
  },
  created() {
    // 在 created 钩子中尝试获取 token
    const token = sessionStorage.getItem("token");
    if (token) {
      // 尝试获取用户数据
      request.get("/getmine")
          .then((response) => {
            if (response.code === 200) {
              this.userInfo = response.data;
            } else {
              this.$router.push("/login");
            }
          });
    } else {
      // 如果 token 不存在，跳转到登录页面
      this.$router.push("/login");
    }
  },
  methods: {
    logout() {
      // 实现退出登录逻辑
      // 跳转到登录页面
      this.$router.push("/login");
    },
    goToHome() {
      // 点击 logo 图片返回主页
      this.$router.push("/home");
    },
  },
};
</script>

<style scoped>
.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  color: #ffffff;
  height: 50px;
}

.logo {
  cursor: pointer;
}

.header-item {
  margin-top: 5px
}
</style>
